<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello Backbone.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.css">
    <script src="../../../libs/jquery/3.2.1/jquery.js"></script>
    <script src="../../../libs/propper.js/1.13.0/umd/popper.js"></script>
    <script src="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
    <script src="../../../libs/underscore.js/1.8.3/underscore.js"></script>
    <script src="../../../libs/backbone.js/1.3.3/backbone.js"></script>
    <style>
        #main-view {
            background: #3b76c0;
        }

        .pageview {
            height: 400px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button id="check">新手报到</button>
        <ul id="world-list">
        </ul>
    </div>
</body>

<script>
    var Man = Backbone.Model.extend({
        initialize: function () {
            this.bind("change:name", function () {
                var name = this.get("name");
                console.log("你改变了 name 属性为：" + name);
            });
            this.bind("change:a", function () {
                var a = this.get("a");
                console.log("你改变了 a 属性为：" + a);
            });
        },
        defaults: {
            name: '张三',
            age: 38,
        },
        aboutMe: function () {
            return `我叫 ${this.get('name')}, 今年 ${this.get('age')} 岁`;
        }
    });
    var man = new Man();
    man.set({ a: 1, b: 2 });
    console.log(man.aboutMe());
</script>

</html>